<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>沃店</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min
.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">
    <!--必要样式-->
    <style type="text/css">
        body {
            background-color: #EFEFEF;
        }

        .am-u-sm-4 span {
            font-size: 16px;
            font-weight: bold;
        }

        .am-u-sm-8 span {
            font-size: 14px;
            color: #808080;
        }

        .am-g {
            padding: 10px 0;
        }

        .change {
            font-size: 14px;
            color: #808080;
            background-color: #fff;
            float: right;
            border: 1px #ccc solid;
        }
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a href="${pageContext.request.contextPath}/clientHome/goFixOrderList" class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            维修订单详情
        </a>
    </h1>
</header>
<div class="am-g whiteBg">
    <div class="am-u-sm-4">
        <span>下单时间</span>
    </div>
    <div class="am-u-sm-8">
        <span>${createTime}</span>
    </div>
    <div class="am-u-sm-4">
        <span>当前状态</span>
    </div>
    <div class="am-u-sm-8">
        <span>
            <c:if test="${hallOrder.statu==20}">
                等待接单
            </c:if>
            <c:if test="${hallOrder.statu==26}">
                等待指派人员接受订单
            </c:if>
            <c:if test="${hallOrder.statu==21}">
                工作人员前往维修
            </c:if>
            <c:if test="${hallOrder.statu==23}">
                等待支付
            </c:if>
            <c:if test="${hallOrder.statu==24}">
                等待用户评价
            </c:if>
            <c:if test="${hallOrder.statu==25}">
                订单已完成
            </c:if>
        </span>
    </div>
</div>
<div class="am-g whiteBg" style="margin-top: 5px;">
    <div class="am-u-sm-4">
        <span>维修用户</span>
    </div>
    <div class="am-u-sm-8">
        <span>${hallOrder.realName}</span><br>
        <span>${hallOrder.contractPhone}</span><br>
        <span>${hallOrder.address}</span>
    </div>
    <div class="am-u-sm-4">
        <span>片区</span>
    </div>
    <div class="am-u-sm-8">
        <span>${organization.organizationName}</span>
        <c:if test="${hallOrder.statu==20}">
            <button class="am-btn change" data-am-modal="{target: '#doc-modal-1',closeViaDimmer: 0}"
                    style="font-size: 14px;padding: 3px 6px;">
                移交
            </button>
        </c:if>
        <div class="am-modal" tabindex="-1" id="doc-modal-1">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">移交
                    <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                </div>
                <div class="am-modal-bd" style="border:0;">
                    <div class="am-u-sm-12" style="padding: 10px 0;">
                        <select data-am-selected id="area">
                            <option>片区选择</option>
                            <option v-for="item in regionlist" v-bind:value="item.id">{{item.organizationName}}</option>
                        </select>
                    </div>
                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                    <span class="am-modal-btn" data-am-modal-confirm onclick="confirm_change()">确定</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="am-g whiteBg" style="margin-top: 20px;">
    <div class="am-u-sm-4">
        <span>维修详情</span>
    </div>
    <div class="am-u-sm-8">
        <span>${hallOrder.broadbandAccount}</span><br>
        <span>${hallOrder.description}</span>
        <c:if test="${hallOrder.totalPrice!=null&&hallOrder.totalPrice!=0}">
            <br>
            <span>
                   ￥ ${hallOrder.totalPrice}</span>
        </c:if>
        <c:if test="${hallOrder.transactionId!=null||hallOrder.payType=='线下支付'}">
            <br>
            <span>已支付</span>
        </c:if>
    </div>
</div>


<c:if test="${hallOrder.statu!=20}">
    <div class="am-g whiteBg" style="margin-top: 10px;">
        <div class="am-u-sm-4">
            <span>指派人员</span>
        </div>
        <div class="am-u-sm-8">
            <span>${handler.username}</span><br>
            <span>${handler.phone}</span>
        </div>
    </div>
</c:if>

<c:if test="${hallOrder.comleteTime!=null}">
    <div class="am-g whiteBg" style="margin-top: 10px;">
        <div class="am-u-sm-4">
            <span>用户评价</span>
        </div>
        <div class="am-u-sm-8">
            <span>${content}</span><br>
            <span>${grade}x星</span>
        </div>
    </div>
</c:if>

<div class="am-g" align="center" style="margin-top: 80px;">
    <c:if test="${hallOrder.statu==20}">
        <a href="${pageContext.request.contextPath}/clientUser/toSelectWorker?hallOrderId=${hallOrder.id}">
            <img src="${pageContext.request.contextPath}/images/accept.png">
        </a>
    </c:if>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="text/javascript">
    var area = new Vue({
        el: "#area",
        data: {
            regionlist: []
        }
    });
    $.ajax({
        type: "get",
        async: false,
        url: '${pageContext.request.contextPath}/clientOrg/getAll',
        dataType: 'json',
        success: function (data) {

            if (data.success == true && data.code == 200) {
                area.regionlist = data.obj;
                console.log(data.obj);
                $("#area").change(function () {
                    var html = $(".am-selected-status").text();
                    html = "片区选择" + "<font style='color:#000;margin-left:10px;'>" + html + "</font>";
                    $(".am-selected-status").text("").html(html);
                });
            }
        },
        error: function () {
            layer.msg('网络超时');
        }

    });

    function confirm_change() {
        var id = $("#area").val();
        if (id == "片区选择") {
            layer.msg('请选择片区');
            return;
        }
        $.ajax({
            type: "post",
            data: {'orderId':${hallOrder.id}, 'orgId': id},
            url: '${pageContext.request.contextPath}/clientHallOrder/transfer',
            dataType: 'json',
            success: function (data) {
                if (data.success) {
                    setInterval(function () {
                        window.location.href = "${pageContext.request.contextPath}/clientHome/goFixOrderList";
                    }, 2000)
                    layer.msg('移交成功,2秒后自动返回。');
                } else {
                    layer.msg(data.msg);
                    return;
                }
            },
            error: function () {
                layer.msg('网络超时');
            }

        });
    }
</script>
</body>

</html>
